<template>
    <el-dialog :title="title" :visible="showdialog" width="30%" @close="close">
        <el-form :model="deptfrom" :rules="deptrules" ref="deptfrom" label-width="100px">
            <el-form-item label="部门名称" prop="name">
                <el-input v-model="deptfrom.name" placeholder="2-10个字符"></el-input>
            </el-form-item>
            <el-form-item label="部门编码" prop="code">
                <el-input v-model="deptfrom.code" placeholder="2-10个字符"></el-input>
            </el-form-item>
            <el-form-item label="部门负责人" prop="managerId">
                <el-select v-model="deptfrom.managerId" placeholder="请选择负责人">
                    <el-option v-if="managerdata" v-for="item in managerdata" :key="item.id" :label="item.username"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="部门介绍" prop="introduce">
                <el-input v-model="deptfrom.introduce" placeholder="1-100个字符" type="textarea" :rows="4"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="isok">确 定</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import { getdepartment, getmanagerlist, adddeptment, getdeptdata,updatadept } from '@/api/department';
export default {
    name: 'adddept',
    props: {
        showdialog: {
            type: Boolean,
            default: false
        },
        activeid: {
            type: Number,
            default: null
        },
        title: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            //添加部门的表单数据
            deptfrom: {
                code: '',
                introduce: '',
                managerId: '',
                name: '',
                pid: ''
            },
            //表单验证规则
            deptrules: {
                name: [{ required: true, message: '请输入部门名称', trigger: 'blur' },
                { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
                {
                    trigger: 'blur', validator: async (rul, val, cb) => {
                        let res = await getdepartment()
                        //判断点击的类型是修改部门
                        //点击修改部门时或获取当前的部门信息里面包含id属性
                        if (this.deptfrom.id) {
                            //将总部门信息中的当前部门信息排除
                            res = res.filter(item => item.id !== this.deptfrom.id)
                        }
                        res.forEach(item => {
                            if (item.name === val) return cb(new Error('已存在该名称,请重新输入'))
                        });
                        cb()
                    }
                }
                ],
                code: [{ required: true, message: '请输入部门编号', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 2 到 10 个字符', trigger: 'blur' },
                {
                    trigger: 'blur', validator: async (rul, val, cb) => {
                        let res = await getdepartment()
                        if (this.deptfrom.id) {
                            res = res.filter(item => item.id !== this.deptfrom.id)
                        }
                        res.forEach(item => {
                            if (item.code === val) return cb(new Error('已存在该编号,请重新输入'))
                        });
                        cb()
                    }
                }
                ],
                introduce: [{ required: true, message: '请输入活动名称', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                managerId: [{ required: true, message: '请选择部门负责人', trigger: 'blur' }
                ],
            },
            //负责人信息
            managerdata: []
        }
    },
    methods: {
        //关闭对话框
        close() {
            this.$emit('closedail', false)
            //resetFields只能重置模板中绑定的数据
            this.$refs.deptfrom.resetFields()
        },
        //获取负责人数据 
        async getmanagerdata() {
            const res = await getmanagerlist()
            this.managerdata = res
        },
        //确认按钮
        isok() {
            this.$refs.deptfrom.validate(async is => {
                if (is) {
                    //修改部门
                    if (this.deptfrom.id) {
                    const res = await   updatadept(this.deptfrom)
                    this.$message.success('修改成功')
                    console.log(res);
                    }
                    //新增部门
                    else {
                        await adddeptment({ ...this.deptfrom, pid: this.$props.activeid })
                        this.$message.success('添加成功')
                    }
                    this.$emit('getdeptdata')
                    this.close()
                }
            })
        },
        //根据id获取数据
        async getdeptdatabyid() {
            this.deptfrom = await getdeptdata(this.$props.activeid)
        }
    },
    created() {
        this.getmanagerdata()
    },
}
</script>
